<template>
  <div class="c-minh640">
    <div v-if="liveList && liveList.length" class="c-text-hidden">
      <div class="c-ph24 c-pt20 c-bg-white" v-for="(item,index) in liveList" :key="index" @click="clickBackListItem(index)">
        <!-- <div class="c-fs22 c-fc-gray">07-02</div> -->
        <div class="c-flex-row c-aligni-center c-pb20 c-bd-b1-f6">
          <div class="c-ww180 c-hh120 c-br10 c-text-hidden c-p">
            <img class="c-h c-w100" :src="$addXossFilter(item.cover,coverimg)" alt="">
            <div class="c-pa c-p-b8 c-p-r8 c-pv2 c-ph8 c-fs16 c-fc-white c-br15 c-translucent-balck40">{{item.duration}}</div>
          </div>
          <div class="c-ml20 c-flex-grow1 c-w0">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-ww300">
              {{item.name}}
            </div>
            <div class="c-fs20 c-fc-sblack c-mt8">{{item.playBackEndDate ? `回放有效期：${item.playBackEndDate}` : '长期有效'}}</div>
            <div class="c-fs20 c-fc-gray c-mt22" v-if="isShowViewers==1">{{item.watchNum}}次观看</div>
          </div>
          <div v-if="showTryLook" class="c-fs20 c-br36 theme-bd1 theme-fc c-pv8 c-ph10">免费试看</div>
        </div>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" noDataText="暂无回放" noDataStyle="padding: 0px" :class="dataStatus == 'NO_DATA' ? 'c-bg-white c-hh640 c-flex-column c-flex-center' : ''"></loading-status-tem>
  </div>
</template>

<script>
// import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: "personalRoomReview",
  components: {
    loadingStatusTem
  },
  props: {
    liveList: {
      type: Array,
      default: () => []
    },
    dataStatus: {
      type: String,
      default: ""
    },
    coverimg:{
      type: String,
      default: ""
    },
    isShowViewers:{
      type: Number,
      default: 1
    },
    showTryLook: {
      //是否展示试看标签
      type: Boolean,
      default: false
    },
  },
  data() {
    return {

    };
  },
  created() { },
  mounted() { },
  watch: {
  },
  methods: {
    clickBackListItem(index) {
      this.$emit('clickBackList', index)
    },

  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only  -->
<style scoped>
</style>
